<template>
  <div class="graph-data-table">
    <u-table
      v-if="head.length > 0"
      :data="tableData"
      :border="true"
      :height="tableHeight"
      :row-height="24"
      size="mini"
      :show-body-overflow="'tooltip'"
      :show-header-overflow="'tooltip'"
      :data-changes-scroll-top="false"
      stripe
      use-virtual
      style="width: 100%;"
      @table-body-scroll="onTableScroll"
    >
      <u-table-column
        key="xuhao"
        :resizable="false"
        :lebel="'序号'"
        :prop="'$$$序号$$$'"
        :fixed="true"
      >
        <span slot="header">序号</span>
        <span slot-scope="scope" class="data-cell index" :index="scope.$index">
          <span class="data-index">
            {{ scope.$index + 1 }}
          </span>
        </span>
      </u-table-column>
      <u-table-column
        v-for="(column, index) in head"
        :key="index"
        :prop="column.prop"
        :label="column.label"
      >
      </u-table-column>
    </u-table>
    <div v-else class="graph-analysis-footer-empty">
      <img alt="" src="@/assets/view/dataview-empty.svg" />
      -- 数据为空 --
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
// @ts-ignore
import { UTable, UTableColumn } from 'umy-table'
import 'umy-table/lib/theme-chalk/index.css'
import GraphAnalysis from '@/store/modules/graphanalysis'
import { queryGraphDataDetail } from '@/api/graph-analysis'

@Component({
  components: {
    UTable,
    UTableColumn,
  },
})
export default class GraphDataTable extends Vue {
  @Prop({ type: Number, default: 220 }) tableHeight!: number // 表高度

  private nodeOrEdgeTab: any = null // node or link
  private activeCategoriesId: any = null // 分类信息

  private pageSize: number = 30 // 页大小
  private curPage: number = 1 // 当前页

  private totalPages: number = 100 // 总页数
  private isLoading: boolean = false // loading

  private head: any = [] // 节点 / 边 表头
  private tableData: any = [] // 节点 / 边 数据

  // graph Id
  public get activeTabId() {
    return GraphAnalysis.activeTabId
  }

  /**
   * 更新表数据
   */
  public changeData(info: any) {
    const { nodeOrEdgeTab, activeCategoriesId } = info
    this.nodeOrEdgeTab = nodeOrEdgeTab
    this.activeCategoriesId = activeCategoriesId
    this.curPage = 1
    this.$nextTick(() => {
      this.queryGraphDataByGraphId(1, 'refresh')
    })
  }

  /**
   *  清空图数据表
   */
  public clearGraphData() {
    this.head = []
    this.totalPages = 0
    this.tableData = []
  }

  /**
   * 请求数据
   */
  public async queryGraphDataByGraphId(
    queryPage: number,
    flag: 'refresh' | 'combine' = 'combine'
  ) {
    const basicData = {
      projectId: GraphAnalysis.projectId,
      graphId: GraphAnalysis.activeTabId,
      pageSize: this.pageSize,
      curPage: queryPage,
      type: this.nodeOrEdgeTab,
    }
    let data: any = {}
    if (this.nodeOrEdgeTab === 'node') {
      data = {
        ...basicData,
        categoryId: this.activeCategoriesId,
      }
    } else {
      data = {
        ...basicData,
        edgeId: this.activeCategoriesId,
      }
    }
    const response: any = await queryGraphDataDetail({ data })
    if (response.data.code === 100) {
      const { result } = response.data
      const dealData: any = result.data.map((item: any) => {
        Object.keys(item).forEach((attribute: any) => {
          if (typeof item[attribute] === 'boolean') {
            item[attribute] = String(item[attribute])
          }
          return item
        })
        return item
      })
      if (flag === 'combine') {
        this.tableData = this.tableData.concat(dealData || [])
      } else {
        this.head = result.head.map((item: any) => {
          return { label: item, prop: item, width: 70 }
        })
        this.totalPages = result.page.totalPages
        this.tableData = dealData || []
      }
    } else {
      this.head = []
      this.totalPages = 0
      this.tableData = []
    }
    this.isLoading = false
    this.curPage += 1
  }

  public onTableScroll(data: any) {
    const { judgeFlse } = data // 是否滚动到底部
    if (judgeFlse && this.curPage <= this.totalPages && !this.isLoading) {
      this.isLoading = true
      this.queryGraphDataByGraphId(this.curPage)
    }
  }
}
</script>

<style lang="less" scoped>
.graph-data-table {
  background-color: #fff;
  height: 100%;

  .audit-table-column {
    display: inline-block;
    max-width: 100%;
  }

  .graph-analysis-footer-empty {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    width: 100%;
  }
}
</style>
